<template>
	<view class="mainAll">
		<!-- v-if="recipientInfo.length != 0" -->
		<view class="search" :style="{background:$store.state.bgPrimaryColor}">
			<u-search placeholder="搜索" v-model="keyword" :showAction="false" bgColor="#ffffff" height="38"></u-search>
		</view>
		<view v-if="recipientInfo.length != 0">
			<!-- 		<view class="newsSearch"><u-search searchIconSize="40" placeholder="搜索咨询师姓名" height="60rpx" shape="round" clearabled></u-search></view> -->
			<view class="newsChat" v-for="(item, index) in recipientInfo" :key="index">
				<!-- <view class="closeIcon"><u-icon size="30" name="close"></u-icon></view> -->
				<view class="swipe-action">
					<view class="swipe-action__content">
						<view class="newsChatInfo" @click.stop="EnterChat(item)">
							<view class="combination">
								<!-- :value="item.unread_num" -->
								<u-badge class="badge" :value="item.unread_num" type="error" :max="99"></u-badge>
								<u-avatar size="45" :src="item.avatar"></u-avatar>
							</view>
							<view class="newsChatName">
								<view class="chatinfo">
									<view>{{ item.name }}</view>
									<view>{{ item.updated_at }}</view>
								</view>
								<view class="msgInfo">
									<view v-if="item.is_online" class="zaixian">[在线]</view>
									<view class="msg_text">{{ item.msg_text || '&nbsp' }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	<!-- 	<u-empty v-else textSize="30" iconSize="200" width="300" height="300" mode="search"
			icon="http://cdn.uviewui.com/uview/empty/search.png"></u-empty> -->
	</view>
</template>
<script>
	import {
		imtalkList
	} from '../../../api/imInterface.js';
	import websocetObj from '@/util/webSocket.js'
	export default {
		data() {
			return {
				keyword: '',
				recipientInfo: [],
				show: false
			};
		},
		onLoad(option) {
			this.emitMsg()
			websocetObj.createSocket()
		},
		onUnload() {
			console.log('页面卸载')
			// 关闭连接
			websocetObj.closeSocket()
		},
		onShow() {
			this.getImtalkList();
			document.body.scrollTop = document.documentElement.scrollTop = 0;
		},
		methods: {
			emitMsg() {
				uni.$on('message', val => {
					if (val.event === 'event_talk') {
						this.getImtalkList()
					}
				})
			},
			async getImtalkList() {
				let {
					data,
					code
				} = await imtalkList();
				console.log(data);
				if (code === 200) {
					this.recipientInfo = data;
					console.log(this.recipientInfo);
				} else {
					uni.showToast({
						title: '获取失败'
					});
				}
			},
			// 进入聊天
			EnterChat(item) {
				console.log(item, '123');
				const stringified = JSON.stringify(item, (key, value) => {
					if (typeof value === 'string') {
						return value.replace(/[<>"&]/g, char => {
							switch (char) {
								case '<':
									return '\\u003C';
								case '>':
									return '\\u003E';
								case '&':
									return '\\u0026';
								case '"':
									return '\\u0022';
							}
						});
					}
					return value;
				});
				uni.navigateTo({
					url: `/pages/Tabbar/Teacher/chatPage?params=${stringified}`
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	button::after {
		border: none;
	}

	.mainAll {
		// overflow: hidden;
		// z-index: 9999999;
		width: 100%;
		height: 100vh;

		.search {
			padding: 30rpx;
		}
	}

	.newsSearch {
		margin: 20rpx 20rpx;
	}

	.newsChat {
		// margin: 10rpx 0rpx;
		display: flex;
		justify-content: space-between;

		.newsChatInfo {
			display: flex;
			align-items: center;
		}

		.combination {
			position: relative;

			.badge {
				position: absolute;
				z-index: 9;
				right: -5px;
				top: -5px;
			}
		}

		.newsChatName {
			margin-left: 15rpx;

			.chatinfo {
				// width: 30rpx;
				width: 610rpx;
				display: flex;
				justify-content: space-between;

				:nth-child(1) {
					// width: 56rpx;
					// height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: justify;
					font-style: normal;
				}

				:nth-child(2) {
					// width: 60rpx;
					// height: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #888888;
					line-height: 34rpx;
					text-align: justify;
					font-style: normal;
				}
			}

			.msgInfo {
				display: flex;
				align-items: center;

				.zaixian {
					color: #8dbf57;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 36rpx;
					text-align: justify;
					font-style: normal;
				}
			}

			.msg_text {
				width: 500rpx;
				// margin-top: 15rpx;
				color: #8b8c8e;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 36rpx;
				text-align: justify;
				font-style: normal;
			}
		}

		.newsChatTime {
			margin-left: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			:nth-child(1) {
				margin-top: 15rpx;
				font-size: 25rpx;
				color: #8b8c8e;
				margin-right: 20rpx;
			}

			:nth-child(2) {
				margin-top: 10rpx;
				align-self: flex-end;
			}
		}
	}

	.closeIcon {
		width: 30rpx;
		// height: 30rpx;
		// background: red;
		display: flex;
		align-items: flex-start;
	}

	/deep/ .swipe-action {
		border: none !important;
	}

	.swipe-action__content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 25rpx;
		height: 120rpx;
	}

	/deep/ .u-swipe-action {
		width: 100% !important;
	}
</style>